<template>
  <div class = "row-container" style = "justify-content: space-between">
    <div class = "column-center-container user-fans">
      <span>{{ props.post }}</span>
      <span>动态</span>
    </div>
    <div class = "column-center-container user-fans">
      <span>{{ props.focus }}</span>
      <span>关注</span>
    </div>
    <div class = "column-center-container user-fans">
      <span>{{ props.fans }}</span>
      <span>粉丝</span>
    </div>
  </div>

</template>

<script setup>
const props = defineProps({
  fans: Number,
  post: Number,
  focus: Number
})
</script>

<style lang = "less" scoped>
.user-fans {
  flex: 0 0 33.3%;
  padding: 5px;
  border-right: 1px solid #dbdbdb;

  &:nth-last-child(1) {
    border-right: 0;
  }

  span {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

</style>